import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { history } from 'umi';
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Mentions,
  Select,
  TreeSelect,
} from 'antd';

export default function addOrganization() {
  // 表单添加
  const [name, setName] = useState('');
  const [type, setType] = useState('');
  const [employees, setEmployees] = useState('');
  const [pid, setPid] = useState('');
  const [desc, setDesc] = useState('');
  const [status, setStatus] = useState('');
  const clean = () => {
    setName('');
    setType('');
    setEmployees('');
    setPid('');
    setDesc('');
    setStatus('');
  };
  const addOgr = async () => {
    let data = await axios.post('/addOrganization', {
      name,
      type,
      employees,
      pid,
      desc,
      status,
    });
  };
  const [ogr, setOgr] = useState([]);
  const { RangePicker } = DatePicker;
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 6,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 14,
      },
    },
  };
  const getOgr = async () => {
    let {
      data: { data },
    } = await axios.get('/getOrganization');
    setOgr(data);
  };
  useEffect(() => {
    getOgr();
  }, []);
  return (
    <div>
      <div className="hwy-addOrganization">
        <Form
          {...formItemLayout}
          // variant="filled"
          style={{
            maxWidth: 600,
          }}
        >
          <Form.Item
            label="机构名称"
            name="aa"
            rules={[
              {
                required: true,
                message: '请输入机构名称',
              },
            ]}
          >
            <Input value={name} onChange={(e) => setName(e.target.value)} />
          </Form.Item>

          <Form.Item
            label="机构类型"
            name="bb"
            rules={[
              {
                required: true,
                message: '请选择类型',
              },
            ]}
          >
            <Select
              value={type}
              onChange={(value: any) => {
                setType(value);
                console.log(type);
              }}
            >
              <option value="总公司">总公司</option>
              <option value="分公司">分公司</option>
              <option value="部门">部门</option>
            </Select>
          </Form.Item>

          <Form.Item
            label="机构人数"
            name="cc"
            rules={[
              {
                required: true,
                message: '请输入人数',
              },
            ]}
          >
            <Input
              value={employees}
              onChange={(e) => setEmployees(e.target.value)}
            />
          </Form.Item>

          <Form.Item
            label="上级机构"
            name="dd"
            rules={[
              {
                required: true,
                message: 'Please input!',
              },
            ]}
          >
            <Select value={pid} onChange={(value) => setPid(value)}>
              {ogr
                .filter(
                  (item: any) =>
                    item.type === '分公司' || item.type === '总公司',
                )
                .map((item: any) => {
                  return <option value={item._id}>{item.name}</option>;
                })}
            </Select>
          </Form.Item>

          <Form.Item
            label="描述"
            name="ee"
            rules={[
              {
                required: false,
                message: 'Please input!',
              },
            ]}
          >
            <Input.TextArea
              rows={4}
              value={desc}
              onChange={(e) => setDesc(e.target.value)}
            />
          </Form.Item>

          <Form.Item
            label="状态"
            name="ff"
            rules={[
              {
                required: true,
                message: 'Please input!',
              },
            ]}
          >
            <Select value={status} onChange={(value) => setStatus(value)}>
              <option value="true">已启用</option>
              <option value="false">已禁用</option>
            </Select>
          </Form.Item>
          <Button
            onClick={() => {
              clean();
            }}
          >
            取消
          </Button>
          <Button
            type="primary"
            onClick={() => {
              addOgr();
              history.push('/home/management/roomManage');
            }}
          >
            保存
          </Button>
        </Form>
      </div>
    </div>
  );
}
